<template>
  <div class="org-staffList">
    <h3>用户账号管理</h3>
    <div class="input_box">
      <span class="querySpans">查询条件：</span>
      <el-select v-model="selectData.roleId" size="small" placeholder="选择角色" style="width:200px">
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-input v-model="selectData.phone" placeholder="请输入手机号" style="width:200px" size="small"></el-input>
      <el-input v-model="selectData.name" placeholder="请输入姓名" size="small" style="width:200px"
                maxlength="10"></el-input>
      <el-button class="selectBtn" size="small" @click="getList(1,page_option.page_size)">查询</el-button>
      <el-button class="resetBtn" size="small" @click="reset()">重置</el-button>
      <el-button size="small" icon="el-icon-circle-plus" class="addAll" style="float:right;margin-right:30px"
                 @click="add">账号添加
      </el-button>
      <!--<el-button size="small" class="addAll" style="float:right;margin-right:30px"-->
      <!--&gt;导出账密-->
      <!--</el-button>-->
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small">
        <el-table-column prop="id" label="ID" min-width="60" fixed></el-table-column>
        <el-table-column prop="userName" label="真实姓名" min-width="120"></el-table-column>
        <el-table-column prop="roleName" label="用户角色" min-width="120"></el-table-column>
        <el-table-column prop="account" label="账号" min-width="150"></el-table-column>
        <el-table-column label="学号" min-width="150">
          <template v-slot="scope">
            {{ scope.row.identity === 1 ? scope.row.userNumber : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="工号" min-width="150">
          <template v-slot="scope">
            {{ scope.row.identity !== 1 ? scope.row.userNumber : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" min-width="150">
          <template v-slot="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="入学时间" min-width="150">
          <template v-slot="scope">
            <template v-if="scope.row.identity === 1">
              {{ scope.row.admissionTime | formatTime }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="入职时间" min-width="150">
          <template v-slot="scope">
            <template v-if="scope.row.identity !== 1">
              {{ scope.row.admissionTime | formatTime }}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="className" label="班级（学生）" min-width="150"></el-table-column>
        <el-table-column prop="identityCard" label="身份证号" min-width="150"></el-table-column>
        <el-table-column prop="address" label="现居住地" min-width="150"></el-table-column>
        <el-table-column prop="idEntityCardAddress" label="身份证所在地" min-width="150"></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
        <el-table-column label="创建时间" min-width="150">
          <template v-slot="scope">
            {{ scope.row.createTime| formatTime }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="400">
          <template v-slot="scope">
            <el-button @click="resetProtect(scope.row)" style="background:#008a96;color:#fff" size="small">
              重置密保
            </el-button>
            <el-button @click="resetPWD(scope.row)" style="background:#008a96;color:#fff" size="small">重置密码
            </el-button>
            <el-button @click="handleEdit(scope.row)" style="background:#008a96;color:#fff" size="small">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" style="background:#008a96;color:#fff" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roleList: [], // 角色列表
      selectData: {
        roleId: "", //角色id
        phone: "", //手机号
        name: "" //用户名
      },
      tableData: [{
        id: 1
      }],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      }
    };
  },
  computed: {
    tableSize() {
      return this.$store.getters.tableSize;
    },
  },
  mounted() {
    this.getRoleList();
    this.getList(1, this.page_option.page_size);
  },
  methods: {
    //条件查询
    getList(pageNum, pageSize) {
      let params = {
        pageNum,
        pageSize:pageSize||this.page_option.page_size,
        roleId: this.selectData.roleId, //角色id
        phone: this.selectData.phone, //手机号
        name: this.selectData.name //用户名
      };

      this.$api.authority.userAccountList(params)
        .then((res) => {
          this.tableData = res.data.list;
          this.page_option.total = res.data.total
        });
    },
    getRoleList() {
      let params = {
        pageSize: 100,
        pageNum: 1
      };
      this.$api.authority.getRoleList(params)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            let data = res.data;
            this.roleList = data.list;
          }
        });
    },
    //重置查询条件
    reset() {
      this.selectData = {
        roleId: "", //角色id
        phone: "", //手机号
        name: "" //用户名
      };
      this.page_option.current_page = 1;
      this.page_option.page_size = 15;
      this.getList(1, this.page_option.page_size);
    },
    //获取表格数据,current（当前页）、size（一页显示几条数据）两个参数
    handleSizeChange(size) {
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList(1, this.page_option.page_size);
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList(1, this.page_option.page_size);
    },
    handleEdit(row) {
      console.log(row);
      this.$router.push({ path: "/authority/systemUser/edit",query:{id:row.id} });
    },
    handleDelete(row) {
      this.$confirm("是否确认删除此账号?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$api.authority.deleteAccount({id:row.id})
        .then(()=>{
           this.$message.success("删除成功");
           this.getList(1,this.page_option.page_size)
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    add() {
      this.$router.push({ path: "/authority/systemUser/add" });
    },
    resetProtect(row){
      this.$api.authority.resetPasswordProtection({
        id:row.id
      }).then((res)=>{
         this.$message.success("已重置密保");
      })
    },
    resetPWD(row){
      this.$api.authority.resetPasswordProtection({
        id:row.id
      }).then((res)=>{
        this.$message.success("已重置密码为:a123456");
      })
    }
  }
};
</script>
<style scoped>
@import url('./list.css');
</style>
